<template>
  <view>
    <u-navbar :border-bottom="false">
      <view class="search-wrap">
        <u-search
          v-model="keyword"
          placeholder="实体卡兑换码"
          height="64"
          search-icon=""
          action-text="兑换"
          @search="changeSearch"
          @custom="changeSearch"
        ></u-search>
      </view>
    </u-navbar>
    <view class="coupon-wraper" :style="{ height: mescrollHeight }">
      <view class="tabs-box">
        <u-tabs-swiper
          :activeColor="globPrimaryColor"
          inactiveColor="#909399"
          ref="tabs"
          :list="tabList"
          :current="current"
          @change="change"
          :bold="false"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <!-- #ifdef MP-WEIXIN || APP-PLUS -->
      <view style="height: 80rpx; width: 100%"></view>
      <!-- #endif -->
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index"
          ><couponItem :ref="page.val" :type="page.val"></couponItem
        ></swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import couponItem from './components/coupon-item.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    couponItem,
  },
  data() {
    return {
      keyword: '',
      tabList: [
        {
          name: '可使用',
          val: 'usable',
        },
        {
          name: '已使用',
          val: 'used',
        },
        {
          name: '已过期',
          val: 'expired',
        },
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  methods: {
    // 兑换卡卷
    changeSearch(val) {
      var that = this
      if (this.$u.test.empty(val)) {
        this.$u.toast('请输入实体卡兑换码')
        return
      }
      this.$edu.api
        .postUserCouponExchange({
          code: val,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          switch (that.swiperCurrent) {
            case 0:
              that.$refs.usable[0].refresh()
              break
            case 1:
              that.$refs.used[0].refresh()
              break
            case 2:
              that.$refs.expired[0].refresh()
              break
          }
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
  },
}
</script>

<style lang="scss" scoped>
.search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 10rpx;
}
.coupon-wraper {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .tabs-box {
    padding: 0 30rpx;
    /* #ifdef MP-WEIXIN || APP-PLUS */
    position: fixed;
    z-index: 999;
    width: 100%;
    /* #endif */
  }
  .swiper-box {
    flex: 1;
  }
}
</style>
